<template>
  <s-layout id="layout" :title="'政策汇报'" navbar="normal" leftIconColor="#333" :autoBack="false" :bgColor="state.bgColor"
    :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx' }">
    <view class="call_on" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <scroll-view scroll-y class="comprehensive">
        <view class="item_wrap">
          <!-- 表单结构 -->
          <uni-forms ref="relRef" v-model="state.formData" :rules="state.rules" validateTrigger="bind" labelWidth="120">
            <uni-forms-item name="title" label="">
              <view class="title">
                <uni-easyinput placeholder="请输入标题文字" v-model="state.formData.title" type="text" :inputBorder="false"
                  :maxlength="15">
                </uni-easyinput>
                <view class="limit">最多15个字</view>
              </view>
            </uni-forms-item>
            <uni-forms-item name="content" label="">
              <view class="cont">
                <editor id="editor" class="ql-container" placeholder="请输入正文内容"
									@input="contentInput(index, $event)" @statuschange="onStatusChange">
								</editor>
                <!-- <uni-easyinput type="textarea" v-model="state.formData.content" :inputBorder="false"
                  placeholder="输入正文内容" :maxlength="-1" /> -->
                <view class="hint">真棒！您已经完成{{ state.formData.count }}个字，可以再多写一点哦～</view>
              </view>

            </uni-forms-item>

          </uni-forms>
        </view>


      </scroll-view>
    </view>

    <!-- 底部提交按钮 -->
    <view>
      <s-button @netWork="submitForm" :text="text"></s-button>
    </view>

    <!-- <view v-else class="edit_button">
       v-if="!editid"
      <button class="del" @tap="deletesubmit">删除</button>
      <button class="edit" @tap="editsubmit">保存修改</button>
    </view> -->

  </s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive, unref , watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { safeAreaInsets } = uni.getSystemInfoSync()
const text = ref("提交");
const state = reactive({
  bgColor: '#fff',
  fileList1: [],
  formData: {
    title: '',
    content: '',
    count:0

  },
  rules: {
    title: {
      rules: [{
        required: true,
        errorMessage: '请输入标题，最大15个字'
      }]
    },
    content: {
      rules: [{
        required: true,
        errorMessage: '输入正文内容'
      }]
    }
  },
});

watch(
      () => state.formData.content,
      (val) => {
        state.formData.count = val.length
      }
    )
const editid = ref('')
onLoad((options) => {
  if (options.id) {
    editid.value = options.id
    // state.formData.title = options.title
    // state.formData.content = options.content
  }
})


const contentInput = (index,e) => {
  state.formData.content = e.detail.html
}


const relRef = ref();
const submitForm = async () => {
  // #ifdef MP
  sheep.$platform.useProvider('wechat').subscribeMessage(['apply_notice','apply_result_notice']);
    // #endif
  const validate = await unref(relRef)
    .validate()
    .catch((error) => {
    });
  if (!validate) return;
  uni.$u.throttle(() => {
  let parpam={
    title: state.formData.title,
    content: state.formData.content,
  }
  sheep.$api.policy_report.postPolicyreportAdd(parpam).then((res) => {
    if (res.code == 1) {
      sheep.$helper.toast(res.msg);
      setTimeout(() => {
        sheep.$router.back(true)
      }, 500)
    } else {
      sheep.$helper.toast(res.msg);
    }
  })
},1000)
};


</script>

<style lang="scss" scoped>
// 文本编辑器样式
:deep(.ql-container) {
  width: calc(100% - 60rpx);
  margin: 0 30rpx 0;
    padding-top: 10rpx;
    background-color: #f9faff;
     font-style: normal !important; /* 取消斜体 */
}
:deep(#editor) {
    font-style: normal !important; /* 取消斜体 */
}

// 滚动
.comprehensive {
  width: calc(100% - 40rpx);
  background-color: transparent;
  margin: 0 20rpx;
  // height: 65vh;
}

//列表
.call_on {
  width: 100%;
  // height: 89vh;
  overflow: hidden;

  .item_wrap {
    margin-top: 20rpx;
    background: $uni-bg-color;
    width: 100%;
    height: 50vh;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);

    :deep(.uni-forms) {
      padding-top: 10rpx;

      .uni-easyinput {
        height: 100rpx;
        width: 92%;
        margin: 0 auto;


        .uni-easyinput__content-input {
          height: 100rpx;
          color: #333 !important;
          font-weight: $uni-font-weight;
          font-size: 30rpx;
          padding: 0 10rpx;
        }

      }

      .uni-forms-item__error {
        left: inherit;
        right: 20rpx;
      }
    }

  }

  :deep(.uni-easyinput__content.is-input-border.is-textarea) {
    border: none !important;

    .uni-easyinput__placeholder-class {
      font-size: 26rpx !important;
      color: #999;
      font-weight: 500;
    }
  }

  :deep(.uni-easyinput__content-textarea) {
    color: #999 !important;
    font-weight: 500;
   font-size:$uni-font-size-26;
    height: 530rpx !important;
    overflow-y: auto;
    padding: 0 15rpx;
  }

  .title {
    position: relative;

    :deep(.uni-easyinput__content ){
          border-bottom: 2rpx solid #EFEFEF;
        }
    .limit {
      position: absolute;
      right: 11%;
      top: 35%;
      z-index: 9;
      color: #999;
      color: #999999;
      font-weight: 500;
      font-size: $uni-font-size-sm;
    }

    :deep(.uni-easyinput__placeholder-class) {
      color: #333 !important;
      font-weight: $uni-font-weight;
      font-size: 30rpx;
    }
  }
}

.cont {
  position: relative;
  height: 600rpx;

  .hint {
    position: absolute;
    right: 30rpx;
    bottom: 30rpx;
    z-index: 9;
    font-family: PingFangSC;
    color: #999999;
    font-weight: 500;
    font-size: 22rpx;
  }
}

.loading-text {
  text-align: center;
  font-size: $uni-font-size-base;
  color: #666;
  padding: 20rpx 0 50rpx;
}

.compose {
  color: red;
  background-color: red;
}
//  修改内容
.edit_button{
    height: 144rpx;
    width: 90%;
    padding: 0 5%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 98;
    display: flex;
    .del{width: 276rpx;
      height: 90rpx;
border-radius: 50rpx;
border: 2rpx solid $uni-color-primary;
color: $uni-color-primary;
 font-family: PingFangSC;
color: $uni-color-primary;
font-weight: $uni-font-weight;
font-size: 34rpx;}
.edit{
  margin-left: 20rpx;
  width: 454px;
height: 90rpx;
border-radius: 50rpx;
font-family: PingFangSC;
color: #FFFFFF;
font-weight: $uni-font-weight;
font-size: 34rpx;
background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
}
}
</style>